<template>
	<view class="logistics">
		<view class="logistics-header">
			<text class="logistics-company">快递公司：{{ data.company_name }}</text>
			<text class="logistics-number">快递单号：{{ data.express_no }}</text>
		</view>
		<view class="logistics-list">
			<view v-for="(item, index) in data.list" :key="index" class="logistics-item">
				<view class="logistics-time">{{ item.time }}</view>
				<view class="logistics-message">{{ item.msg }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		logistics
	} from '../../api/order/order.js';

	export default {
		data() {
			return {
				data: {
					express_no: '',
					company_name: '',
					msg: '',
					list: []
				}
			};
		},
		mounted() {
			this.fetchLogisticsInfo();
		},
		methods: {
			fetchLogisticsInfo() {
				// 从存储中获取 trackingNumber 和 userPhone
				const logisticsData = uni.getStorageSync("Logistics");
				// console.log("logisticsData", logisticsData);
				if (logisticsData) {
					// 创建一个包含参数名和参数值的对象
					let data = {
						trackingNumber: logisticsData.data[0].trackingNumber,
						userPhone: logisticsData.data[0].userPhone
					};

					// 调用 logistics 函数，传入对象参数
					logistics(data).then(response => {
						// console.log("logistics", response);

						// 检查 response 是否包含 data 属性，并且 data 是一个对象
						if (response && response.data && typeof response.data === 'object') {
							this.data = response.data.data;
						} else {
							// 处理错误情况，例如 response 没有 data 属性
							console.error('获取物流信息失败，返回的数据格式不正确:', response);
						}
					}).catch(error => {
						// 处理网络请求错误
						console.error('请求物流信息出错:', error);
					});
				} else {
					console.error('物流信息存储为空');
				}
			}

		}
	}
</script>

<style>
	.logistics {
		padding: 15px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.logistics-header {
		display: flex;
		flex-direction: column;
		/* 使子元素垂直排列 */
		align-items: flex-start;
		/* 对齐子元素到容器的起始位置 */
		margin-bottom: 15px;
	}

	.logistics-company,
	.logistics-number {
		font-size: 16px;
		color: #333;
		margin-bottom: 5px;
		/* 在元素之间添加一些间隙 */
	}

	.logistics-company,
	.logistics-number {
		font-size: 16px;
		color: #333;
	}

	.logistics-list {
		margin-top: 15px;
	}

	.logistics-item {
		margin-bottom: 10px;
		padding: 10px;
		background-color: #f9f9f9;
		border-radius: 5px;
	}

	.logistics-time {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}

	.logistics-message {
		font-size: 14px;
		color: #333;
	}
</style>